<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ckeditor" uri="http://ckeditor.com"%>
<%@ page language="java" import="com.liuyan.util.*" pageEncoding="UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%

%>
<!DOCTYPE html>
<html lang="zh-CN">
<link>
    <!--  Mobile viewport scale | Disable user zooming as the layout is optimised -->
    <title>留言板</title>
    <link href="../liuyan/images/icon.ico" rel="icon" type="image/x-icon">
    <script type="text/javascript">
        window._wpemojiSettings = {
            "baseUrl": "http:\/\/s.w.org\/images\/core\/emoji\/72x72\/",
            "ext": ".png",
            "source": {"concatemoji": "http:\/\/returnc.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.4.1"}
        };
        !function (a, b, c) {
            function d(a) {
                var c, d = b.createElement("canvas"), e = d.getContext && d.getContext("2d");
                return e && e.fillText ? (e.textBaseline = "top", e.font = "600 32px Arial", "flag" === a ? (e.fillText(String.fromCharCode(55356, 56806, 55356, 56826), 0, 0), d.toDataURL().length > 3e3) : "diversity" === a ? (e.fillText(String.fromCharCode(55356, 57221), 0, 0), c = e.getImageData(16, 16, 1, 1).data.toString(), e.fillText(String.fromCharCode(55356, 57221, 55356, 57343), 0, 0), c !== e.getImageData(16, 16, 1, 1).data.toString()) : ("simple" === a ? e.fillText(String.fromCharCode(55357, 56835), 0, 0) : e.fillText(String.fromCharCode(55356, 57135), 0, 0), 0 !== e.getImageData(16, 16, 1, 1).data[0])) : !1
            }

            function e(a) {
                var c = b.createElement("script");
                c.src = a, c.type = "text/javascript", b.getElementsByTagName("head")[0].appendChild(c)
            }

            var f, g;
            c.supports = {
                simple: d("simple"),
                flag: d("flag"),
                unicode8: d("unicode8"),
                diversity: d("diversity")
            }, c.DOMReady = !1, c.readyCallback = function () {
                c.DOMReady = !0
            }, c.supports.simple && c.supports.flag && c.supports.unicode8 && c.supports.diversity || (g = function () {
                c.readyCallback()
            }, b.addEventListener ? (b.addEventListener("DOMContentLoaded", g, !1), a.addEventListener("load", g, !1)) : (a.attachEvent("onload", g), b.attachEvent("onreadystatechange", function () {
                "complete" === b.readyState && c.readyCallback()
            })), f = c.source || {}, f.concatemoji ? e(f.concatemoji) : f.wpemoji && f.twemoji && (e(f.twemoji), e(f.wpemoji)))
        }(window, document, window._wpemojiSettings);
    </script>
    <style type="text/css">
        img.wp-smiley,
        img.emoji {
            display: inline !important;
            border: none !important;
            box-shadow: none !important;
            height: 1em !important;
            width: 1em !important;
            margin: 0 .07em !important;
            vertical-align: -0.1em !important;
            background: none !important;
            padding: 0 !important;
        }

        #head {
            margin-right: 20px;
            border-radius: 6px;
            width: 50px;
            height: 50px;
        }

        #head2 {
            margin-right: 20px;
            border-radius: 6px;
            width: 50px;
            height: 50px;
        }
    </style>

    <link rel="stylesheet" href="../liuyan/ckeditor/contents.css" type="text/css"></link>
    <link rel='stylesheet' id='crayon-css' href='../liuyan/css/crayon.min.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='bootstrap' href='../liuyan/css/bootstrap.min.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='genericons-css' href='../liuyan/css/genericons.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='main-style-css' href='../liuyan/css/lybstyle.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='baytech-layout-css' href='../liuyan/css/layout.css' type='text/css' media='all'/>
    <link rel='stylesheet' id='custom-layout-css' href='../liuyan/css/custom.css' type='text/css' media='all'/>
    <script type='text/javascript' src='../liuyan/js/jquery-1.9.0.min.js'></script>
    <script type="text/javascript" src="../liuyan/layer/layer.js"></script>
    <script type="text/javascript" src="../liuyan/layer/extend/layer.ext.js"></script>
    <script type='text/javascript' src='../liuyan/js/jquery-migrate.min.js'></script>
    <script type="text/javascript" src="../liuyan/ckeditor/ckeditor.js"></script>
    <script type='text/javascript' src='../liuyan/js/crayon.min.js'></script>
</head>

<body style="background-color: #E0EEE0">
<div id="page" class="hfeed site wrapper">
    <div class="inner-wrapper" id="inner-wrapper">
        <header style="padding: 10px 0px;" id="header" class="site-header" role="banner">
            <div class="nav-wrapper col-full">
                <div id="nav">
                    <nav id="navigation" role="navigation">
                        <section class="menus">
                            <a href="" class="nav-home"><span>Home</span></a>

                            <h3>Primary Menu</h3>
                            <ul id="main-nav" class="nav">
                                <li><a id="returnLogin" href="contentController.do?method=quit">退出</a></li>
                                <li><a id="changePassword" href="javascript:changePassword()">修改密码</a></li>
                                <li><a id="alterHead" href="javascript:alterHead()">更换头像</a></li>
                                <li><a id="connectionMe" href="javascript:connectionMe()">联系我</a></li>
                                <%--<li><a id="giveMeMoney" href="javascript:giveMeMoney()">打赏</a></li>--%>
                            </ul>
                        </section>
                        <a href="#top" class="nav-close"><span>Return to Content</span></a>

                        <div class="clear"></div>
                    </nav>
                    <!-- #site-navigation -->
                </div>
                <!-- #navbar -->


                <div class="clear"></div>
            </div>
        </header>
        <div id="main" class="site-main">
            <style type="text/css">
                div.header_banner {
                    max-width: 1000px;
                    margin: 0 auto;
                }

                figure.page-banner-bg {
                    padding-top: 10%; /* slope */
                    height: 150px; /* start height */
                    background-image: url(../liuyan/images/topbg.jpg);
                    background-size: cover;
                    -moz-background-size: cover; /* Firefox 3.6 */
                    background-position: center; /* Internet Explorer 7/8 */
                    border-radius: 0 0 3px 3px;
                    box-shadow: 0px 1px 1px #ddd;
                }
            </style>

            <div class="header_banner">
                <figure class="page-banner-bg"></figure>
            </div>

            <div class="layout-left-content full-width">
                <div id="primary" class="content-area">
                    <div id="content1" class="site-content" role="main">
                        <article id="post-702" class="post-702 page type-page status-publish hentry">
                            <div class="entry-content">
                                <p><strong><span style="color: #339966;">人世间有百媚千红，唯独你是我情之所钟！</span></strong></p>

                                <p><strong><span style="color: #ff6600;"><span style="color: #ff0000;">闷骚的你，</span>既然来了，为何不淫湿一首！</span></strong>
                                </p>
                            </div>
                            <!-- .entry-content -->

                            <footer class="entry-meta">
                            </footer>
                            <!-- .entry-meta -->
                        </article>
                        <!-- #post -->

                        <!-- You can start editing here. -->
                        <h3 id="comments"></h3>
                        <ol class="commentlist" id="commentlist">
                            <c:forEach items="${contentListForLevelOne}" var="i">
                                <%--当鼠标移动上去显示删除按钮--%>


                                <div onmouseover="document.getElementById('deleteContentOne${i}').style.display='';"
                                     onmouseout="document.getElementById('deleteContentOne${i}').style.display='none';">
                                    <li class="comment">
                                            <%--自己可以更改自己的头像，不能更改别人的--%>
                                            <c:choose>
                                                <c:when test="${i.userId==sessionScope.userId}">
                                                    <a href="javascript:alterHead() ">
                                                        <div style="float: left;">
                                                            <img id="head" src="../liuyan/images/head/${i.head}.png">
                                                        </div>
                                                    </a>
                                                </c:when>
                                                <c:otherwise>
                                                    <div style="float: left;">
                                                        <img id="head" src="../liuyan/images/head/${i.head}.png">
                                                    </div>
                                                </c:otherwise>
                                            </c:choose>
                                        <div>
                                            <div class="floor">
                                                    ${i.floor}楼
                                            </div>
                                        </div>
                                        <div>${i.userName}:</div>
                                        <div>
                                            ${i.content}
                                        </div>
                                        <span class="datetime">${i.date}</span>
                                        <span class="reply"><a rel="nofollow" class="comment-reply-link"
                                                               href="javascript:void(0)"
                                                               onclick="responseTo(${i.floor});">[回复]</a></span>

                                            <%--判断当前登录的session中userId跟list中的userId比较，如果相等，有删除权限，当然了，admin有最高权限--%>
                                        <span style="display: none" id="deleteContentOne${i}"><c:if
                                                test="${i.userId==sessionScope.userId || sessionScope.userId==1}"><a
                                                href="javascript:void(0)"
                                                onclick="deleteContentById(${i.id})">删除</a></c:if></span>
                                </div>
                                <%--判断当前页level为2的list是不是空，不是空的话循环显示出来--%>
                                <c:if test="${!empty contentListForLevelTwo}">

                                    <ul class="children">
                                            <%--jstl表达式遍历当前页level为2的list，在后台已经按照时间正序排序，所以直接遍历就可--%>
                                        <c:forEach items="${contentListForLevelTwo}" var="m">
                                            <%--如果level为1的楼数跟level为2的楼数是相等，所以显示在一层中--%>
                                            <c:if test="${i.floor == m.floor}">
                                                <div onmouseover="document.getElementById('deleteContent${m}').style.display='';"
                                                     onmouseout="document.getElementById('deleteContent${m}').style.display='none';">
                                                    <li class="comment">
                                                            <%--自己可以更改自己的头像，不能更改别人的--%>
                                                        <c:choose>
                                                            <c:when test="${m.userId==sessionScope.userId}">
                                                                <a href="javascript:alterHead() ">
                                                                    <div style="float: left;">
                                                                        <img id="head2" src="../liuyan/images/head/${m.head}.png">
                                                                    </div>
                                                                </a>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <div style="float: left;">
                                                                    <img id="head2" src="../liuyan/images/head/${m.head}.png">
                                                                </div>
                                                            </c:otherwise>
                                                        </c:choose>
                                                        <div>${m.userName}:</div>
                                                        <div>
                                                             <p>&nbsp;&nbsp;&nbsp;&nbsp;${m.content}</p>
                                                        </div>
                                                        <span class="datetime">${m.date}</span>
                                                        <span id="deleteContent${m}" style="display: none"><c:if
                                                                test="${m.userId==sessionScope.userId || sessionScope.userId==1}"><a
                                                                href="javascript:void(0)"
                                                                onclick="deleteContentById(${m.id})">删除</a></c:if></span>
                                                    </li>
                                                </div>
                                            </c:if>
                                        </c:forEach>
                                    </ul>
                                </c:if>
                                </li>
                            </c:forEach>
                        </ol>

                        <%--分页--%>
                        <div class="page_navi">
                            <p id="p1"></p>
                            <center>
                                <ul class="pagination" id="pagination1"></ul>
                            </center>
                        </div>
                        <div id="respond_box .comment-respond">
                            <div id="respond">
                                <form class="comment-form" method="post" id="commentform">
                                    <p><textarea name="content" id="content" rows="10" cols="80" style="word-wrap:break-word;word-break:break-all;">
                                        </textarea>
                                        <ckeditor:replace replace="content" basePath="ckeditor/"></ckeditor:replace>
                                    </p>

                                    <p>
                                        <input class="submit" name="submitButton" type="button"
                                               onclick="submitComment();" id="submitButton" tabindex="5" value="提交"/>
                                    </p>
                                </form>
                            </div>
                        </div>

                    </div>
                    <!-- #content -->
                </div>
                <!-- #primary -->

            </div>
            <!-- .col-full -->

        </div>
        <!-- #main -->
    </div>
    <!-- .inner-wrapper -->
</div>
<!-- #page -->

<script type="text/javascript" src="../liuyan/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../liuyan/js/jquery.cookie.js"></script>
<script type="text/javascript" src="../liuyan/js/jqPaginator.js"></script>

<script type="text/javascript">
    /*因为出现一种问题，当最后一页时，还可以点击下一页，所以应该不能点击，所以禁用*/
    setTimeout(disableds,1);//1ms后禁用
    function disableds(){
        $(".disabled a").attr("href","javascript:void(0)");
    }

</script>
<script type="text/javascript">
    /*页面第一次加载时出现*/
    if($.cookie("user")==null){
        layer.confirm('我是一只大菜鸟，很高兴在这里跟大家一起学习？', {
            btn: ['好的', '算了吧'] //按钮
        }, function () {
            layer.msg('谢谢支持，，，', {
                time: 2000, //2s后自动关闭
            });
        }, function () {
            layer.msg('好吧。。。', {
                time: 2000, //2s后自动关闭
            });
        })
    }
    $.cookie("user", "1");
</script>
<%--更换头像--%>
<script type="text/javascript">
    function alterHead(){
        var index = layer.open({
            type: 2,
            title: '也可以用力点击自己的头像更换哦~',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['580px', '610px'],
            content: '<%=CommonConstants.LOCALHOST%>alterHead.jsp'
        });
    }
</script>

<%--提交内容--%>
<script type="text/javascript">

    /*提交评论*/
    function submitComment() {
        if (CKEDITOR.instances.content.getData() == "") {
            layer.alert("请输入内容！", {
                icon: 2,
                skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
            });
            $("#content").focus();
            return false;
        }

        /*正则匹配将第一个<p>替换为<p>&nbsp;&nbsp;&nbsp;&nbsp;*/
        var submitContent = CKEDITOR.instances.content.getData();
        var regP = /^<p>/;
        var rega = /^<p>/;
        var submitContentSpace =  submitContent.replace(regP.exec(submitContent)[0],rega.exec(submitContent)[0]+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");


        var indexLoad = layer.load(0, {shade: false});//加载层
        $.ajax({
            type: "post",
            data: {
                comment: submitContentSpace
            },
            url: "contentController.do?method=submitContent",
            success: function (data) {
                layer.close(indexLoad);//关闭加载层
                if (data == "SUCCESS") {
                    //成功后提示删除成功，并且刷新页面
                    layer.alert('评论成功~^o^~', {
                        icon: 6,
                        skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    }, function (index) {
                        /*点击alert的确定回调函数*/
                        $("#comment").val('');//清空上一次评论
                        window.location.reload();//页面刷新一次
                        layer.close(index);//alert关闭
                    });
                } else if (data == "FAIL") {
                    layer.alert('提交评论失败，请重新尝试', {
                        icon: 5,
                        skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    });
                }
            }
        })
    }

    /*如果后台没给向前台传currentPage，默认是1，否则就是后台传的currentPage*/
    var currentPage = 1;
    <c:if test="${!empty currentPage}">
    currentPage =${currentPage};
    </c:if>

    /*根据内容id删除内容*/
    function deleteContentById(contentId) {
        layer.confirm('您确定要删除吗？', {
            btn: ['残忍删除', '算了吧'] //按钮
        }, function () {
            var indexLoad = layer.load(0, {shade: false});//加载层
            $.ajax({
                type: "post",
                url: "contentController.do?method=deleteContent",
                data: "contentId=" + contentId,
                success: function (data) {
                    layer.close(indexLoad);//关闭加载层
                    if (data == "SUCCESS") {
                        //成功后提示删除成功，并且刷新页面
                        layer.alert('删除成功╰_╯~', {
                            icon: 6,
                            skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                        }, function (index) {
                            /*点击alert的确定回调函数*/
                            window.location.reload();//成功后页面刷新一次
                            layer.close(index);//alert弹窗关闭
                        });
                    } else {
                        layer.alert('删除失败，请重新尝试', {
                            icon: 5,
                            skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                        });
                    }
                }
            })
        }, function () {
            layer.msg('好吧,浪费感情', {
                time: 2000, //2s后自动关闭
            });
        })
    }

    /*回复*/
    function responseTo(floor) {
        layer.prompt({title: '回复点啥好呢？@_@', formType: 2}, function (text) {
            var indexLoad = layer.load(0, {shade: false});//加载层
            $.ajax({
                type: "post",
                data: {
                    comment: text,
                    floor: floor
                },
                url: "contentController.do?method=response",
                success: function (data) {
                    layer.close(indexLoad);//关闭加载层
                    if (data == "SUCCESS") {
                        //成功后提示删除成功，并且刷新页面
                        layer.alert('回复成功(*^@^*)', {
                            icon: 6,
                            skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                        }, function (index) {
                            /*点击alert的确定回调函数*/
                            window.location.reload();//页面刷新一次
                            layer.close(index);//alert弹窗关闭
                        });
                    } else {
                        layer.alert('回复失败，请重新尝试');
                    }
                }
            })
        });
    }
</script>

<%--分页处理--%>
<script type="text/javascript">

    /*如果后台没给向前台传currentPage，默认是1，否则就是后台传的currentPage*/
    var currentPage = 1;
    <c:if test="${!empty currentPage}">
    currentPage =${currentPage};
    </c:if>

    var count = 0;
    <c:if test="${!empty count}">
    count =${count};
    </c:if>

    /*分页显示，用了jqPaginator插件，给总数，页面大小，会自动算出总页数*/
    $.jqPaginator('#pagination1', {
        totalCounts: count,//总数
        pageSize: 10,
        visiblePages: 10,
        currentPage: currentPage//当前页
    });
</script>

<script type="text/javascript">
    var regPwd = /^[0-9a-zA-Z]+$/;
    //验证密码
    function changePassword() {
        layer.prompt({
            title: '请输入您当前密码:',
            formType: 1 //prompt风格，支持0-2
        }, function (password) {
            if(password.length < 6 || password.length > 12 || !regPwd.test(password)){
                layer.alert('密码应为6-12位的字母、数字', {
                    icon: 2,
                    skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                });
            }else{
                var indexLoad = layer.load(0, {shade: false});//加载层
                $.ajax({
                    type: "post",
                    url: "contentController.do?method=getPwdCheck",
                    data: "password=" + password,
                    success: function (date) {
                        layer.close(indexLoad);//关闭加载层
                        if (date == "SUCCESS") {
                            modifyPwd();
                        } else {
                            layer.alert('密码验证失败，请重新尝试', {
                                icon: 5,
                                skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                            });
                        }
                    },
                });
            }

        });

    }

    //修改密码
    function modifyPwd(){
        layer.prompt({
            title: '您要将密码修改为:',
            formType: 1 //prompt风格，支持0-2
        }, function (password) {
            if(password.length < 6 || password.length > 12 || !regPwd.test(password)){
                layer.alert('密码应为6-12位的字母、数字', {
                    icon: 2,
                    skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                }, function (index) {
                    /*点击alert的确定回调函数*/
                    layer.close(index);//alert弹窗关闭
                    modifyPwd();
                });
            }else{
                var indexLoad = layer.load(0, {shade: false});//加载层
                $.ajax({
                    type: "post",
                    url: "contentController.do?method=changePassword",
                    data: "password=" + password,
                    success: function (date) {
                        layer.close(indexLoad);//关闭加载层
                        if (date == "SUCCESS") {
                            layer.alert('密码已经修改为' + password, {
                                icon: 6,
                                skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                            });
                        } else {
                            layer.alert('密码修改失败，请重新尝试', {
                                icon: 5,
                                skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                            });
                        }
                    },
                });
            }
        });
    }
</script>


<script type="text/javascript">
    <%--联系我--%>
    function connectionMe() {
        var index = layer.open({
            type: 2,
            title: '点击右上角给我写邮件吧.=^-^= ',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['800px', '600px'],
            content: '<%=CommonConstants.LOCALHOST%>connectionMe.html'
        });
    }

</script>
</body>
</html>